@page
@{ Layout = "_LayoutApp"; }
@section Styles{
    <link href="/sitefiles/assets/css/buttons.css" rel="stylesheet" type="text/css" />
    <style>
        html {
            overflow-x: hidden !important;
        }
        body{
            margin:0;
            padding:0;
        }
        svg{
            touch-action:auto;
        }
    </style>
}
<div class="bg-cover py-8 px-3 text-white text-center rounded-0" :style="{'background-image':'url('+(user.avatarbgUrl || DEFAULT_AVATAR_BG_URL)+')'}">
    <div class="py-5"></div>
    <div class="pb-1">
        <span class="text-white bg-black bg-opacity-10 px-2 py-1">
            <span class="fs-6 text-white px-3 py-1" style="background-color: rgba(0, 0, 0, 0.1);"><i class="bi bi-calendar-event me-2"></i>{{ dateStr }}</span>
        </span>
    </div>
</div>
<div class="p-3 animate__animated animate__zoomIn">
    <div class="mt-n8">
        <div class="bg-white p-2 rounded-pill d-flex justify-content-between align-items-center smooth-shadow-lg">
            <span class="d-flex justify-content-start align-items-center">
                <i class="bi bi-person-fill me-2 fs-2 ms-4"></i><span>欢迎：{{ user.displayName }}</span>
            </span>
            <img :src="user.avatarUrl || DEFAULT_AVATAR_URL" class="img-fluid avatar-xl rounded-circle bg-light p-1">
        </div>
    </div>
</div>
<div class="text-uppercase text-warning fw-semibold mt-5 mb-2 text-center">
    <i class="bi bi-flag-fill me-2"></i>今日考试
</div>
<div class="mx-2" v-if="todayExam && todayExam.id>0 && utils.contains(openMenus,'examPaper')">
    <div class="card bg-primary my-3 shadow-lg mx-8 rounded-5" v-on:click="btnViewPaperClick(todayExam.id)">
        <div class="card-body text-center text-white">
            <div class="row mb-3">
                <div class="col-12">
                    <div>
                        <span class="text-light">{{ todayExam.title }}</span>
                    </div>
                    <div class="mt-2" v-if="todayExam.myExamTimes>0">
                        <span>
                            <i class="bi bi-person-check-fill me-2"></i>已参与
                        </span>
                    </div>
                </div>
            </div>
            <div>
                <span class="fs-3 text-warning fw-bold">{{ todayExam.examStartDateTimeStr }} </span>
            </div>
            <div>
                <span class="fs-3">开考</span>
            </div>
        </div>
    </div>
</div>
<div class="mx-8" v-else>
    <div class="card my-3 mx-8 rounded-pill border-0 shadow-lg">
        <div class="card-body py-3">
            <div class="text-center">
                <small><i class="bi bi-clipboard me-2"></i>无安排</small>
            </div>
        </div>
    </div>
</div>
<div class="p-3">
    <div class="rounded-0 mb-3" v-on:click="top.$vue.btnAppMenuClick('exam')" v-if="utils.contains(openMenus,'examPaper')">
        <div class="text-center">
            <div class="m-0">
              <i class="bi bi-journal-medicalme-2 text-warning"></i>
                累计考试<span class="text-primary fw-bold mx-2">{{ examTotal }}</span>场次
            </div>
            <div class="m-0">
                <apexchart height="380" type="radialBar" :options="passChartOptions" :series="passSeries"></apexchart>
            </div>
        </div>
    </div>
    <div class="rounded-0 mb-3" v-else>
        <div class="text-center">
            <div class="m-0">
                <i class="bi bi-journal-medicalme-2 text-warning"></i>
                累计考试<span class="text-primary fw-bold mx-2">{{ examTotal }}</span>场次
            </div>
            <div class="m-0">
                <apexchart height="380" type="radialBar" :options="passChartOptions" :series="passSeries"></apexchart>
            </div>
        </div>
    </div>
    <div class="mb-3">
        <div class="row g-3">
            <div class="col-xl-6 col-lg-6 col-md-6 col-6" v-if="utils.contains(openMenus,'examPaperMoni')">
                <div class="card rounded-start-pill border-start-0 border-bottom-0 border-end-0 border-5 border-primary card-hover-with-icon shadow-lg" v-on:click="btnMoreMenuClick('moni')">
                    <div class="card-body d-flex align-items-center justify-content-between py-3">
                        <div>
                            <i class="bi bi-journals text-warning fs-3"></i>
                        </div>
                        <div class="text-end">
                            <div class="mb-2 fs-6">模拟<span class="text-primary fw-bold mx-2 fs-4">{{ examMoniTotal }}</span>场</div>
                            <div class="mb-0 fs-6">
                                及格率<span class="text-primary fw-bold mx-1 fs-4">{{ examMoniPercent }}</span>%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 col-6" v-if="utils.contains(openMenus,'examPractice')">
                <div class="card rounded-end-pill border-start-0 border-end-0 border-bottom-0 border-5 border-primary card-hover-with-icon shadow-lg" v-on:click="btnMoreMenuClick('shuati')">
                    <div class="card-body d-flex align-items-center justify-content-between py-3">
                        <div class="text-end">
                            <div class="mb-2 fs-6">刷题<span class="text-primary fw-bold mx-2 fs-4">{{ practiceAnswerTmTotal }}</span>道</div>
                            <div class="mb-0 fs-6">
                                正确率<span class="text-primary fw-bold mx-1 fs-4">{{ practiceAnswerPercent }}</span>%
                            </div>
                        </div>
                        <div>
                            <i class="bi bi-journal-check text-success fs-3"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card bg-warning rounded-0">
    <div class="card-body">
        <div class="task-list">
            <div class="text-center mb-3">
                <div>
                    <h2 class="mb-0 text-white fw-bold"><i class="bi bi-flag-fill me-2"></i>{{ taskTotal }} 个待办</h2>
                </div>
            </div>
            <div class="task-kanban mt-3" v-if="taskTotal>0">
                <div class="d-flex flex-row overflow-x-auto">
                    <div class="me-3" style="min-width:200px;" v-for="taskExam in taskPaperList" v-if="taskPaperList && taskPaperList.length>0">
                        <a class="card mb-3" href="javascript:;" v-on:click="btnViewPaperClick(taskExam.id)">
                            <div class="card-body p-3 d-flex flex-column gap-2 card-lift">
                                <div>
                                    <el-tag effect="dark" size="mini">考 试</el-tag>
                                    <br />
                                    <span class="h5">{{ taskExam.title }}</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <span class="fs-6">
                                                {{ taskExam.examStartDateTimeStr }} 开考
                                            </span>
                                        </div>
                                    </div>
                                    <div>
                                        <span class="me-2 align-middle">
                                            <span class="fw-semibold fs-6">{{ taskExam.userExamTimes }}</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="me-3" style="min-width:200px;" v-for="taskQ in taskQList" v-if="taskQList && taskQList.length>0">
                        <a class="card mb-3" href="javascript:;" v-on:click="btnViewQClick(taskQ.id)">
                            <div class="card-body p-3 d-flex flex-column gap-2 card-lift">
                                <div>
                                    <span class="badge bg-warning">问卷调查</span>
                                    <br />
                                    <span class="h5">{{ taskQ.title }}</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <span class="fs-6">
                                                {{ taskQ.examEndDateTimeStr }} 后过期
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="me-3" style="min-width:200px;" v-for="taskAss in taskAssList" v-if="taskAssList && taskAssList.length>0">
                        <a class="card mb-3" href="javascript:;" v-on:click="btnViewAssClick(taskAss.id)">
                            <div class="card-body p-3 d-flex flex-column gap-2 card-lift">
                                <div>
                                    <span class="badge bg-warning">测 评</span>
                                    <br />
                                    <span class="h5">{{ taskAss.title }}</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <span class="fs-6">
                                                {{ taskAss.examEndDateTimeStr }} 后过期
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="p-3">
    <div class="p-3 pb-2 mt-2">
        <h5 class="border-start border-5 border-primary ps-2 d-flex justify-content-between align-items-center">
            <span>最新考试安排</span>
            <el-link :underline="false" v-on:click="btnMoreMenuClick('exam')">更多<i class="el-icon-more ms-2"></i></el-link>
        </h5>
    </div>
    <div class="card rounded-0 mb-3 shadow-lg" v-if="examPaper && utils.contains(openMenus,'examPaper')" v-on:click="btnViewPaperClick(examPaper.id)">
        <div class="card-body">
            <div class="mb-3">
                {{ examPaper.title }}
            </div>
            <div class="row align-items-center g-3">
                <div class="col">
                    <div>
                        <div class="fw-light">
                            <div class="mb-1">总分：{{examPaper.totalScore}}<span class="me-1"></span>及格分：{{examPaper.passScore}}</div>
                            <div class="mb-1">
                                考试次数：
                                <span class="text-success fw-bold" v-if="(examPaper.userExamTimes-examPaper.myExamTimes)>0">
                                    {{examPaper.userExamTimes-examPaper.myExamTimes}}
                                </span>
                                <span class="fs-3 text-danger fw-bold" v-else>
                                    0
                                </span>
                                /{{examPaper.userExamTimes}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="bg-light p-2 rounded-circle">
                        <el-button type="primary" circle icon="el-icon-s-order fs-1" class="p-3"></el-button>
                    </div>
                </div>
            </div>
            <div><i class="bi bi-calendar2 me-2 text-warning"></i>{{ examPaper.examStartDateTimeStr }}</div>
        </div>
    </div>
    <div class="card rounded-0 mb-3 shadow-lg" v-else>
        <div class="card-body">
            <div class="text-center p-5">
                <small><i class="bi bi-clipboard me-2"></i>暂无安排</small>
            </div>
        </div>
    </div>
    <div v-if="utils.contains(openMenus,'examPk')"  class="card rounded-0 mt-5 shadow-lg bg-cover border border-dark border-5" style="background-image:url(/sitefiles/assets/images/pk/coverapp.jpg)" v-on:click="btnPkMoreMenuClick">
        <div class="card-body btn-paomadeng">
            <span class="btn-paomadeng-span"></span><span class="btn-paomadeng-span"></span><span class="btn-paomadeng-span"></span><span class="btn-paomadeng-span"></span>
            <div class="text-center py-5 text-light">
                <i class="bi bi-trophy-fill fs-2 text-warning"></i>
                <div class="mt-3">
                    <span class="text-light px-3 py-1 rounded-0" style="background-color: rgba(0, 0, 0, 0.2);">答题竞赛</span>
                </div>
            </div>
        </div>
    </div>
    <template v-if="utils.contains(openMenus,'examPractice')">
        <div class="p-3 pb-2 mt-4">
            <h5 class="border-start border-5 border-primary ps-2 d-flex justify-content-between align-items-center">
                <span>刷题练习</span>
                <el-link :underline="false" v-on:click="btnMoreMenuClick('shuati')">更多<i class="el-icon-more ms-2"></i></el-link>
            </h5>
        </div>
        <div class="card rounded-0 mb-3 shadow-lg">
            <div class="card-body">
                <div>
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <el-progress type="circle" :percentage="practiceAllPercent" color="#6600FF" :width="88" :stroke-width="8"></el-progress>
                        </div>
                        <div class="text-center">
                            <div class="mb-1 p-2 bg-light w-100 rounded-end-pill">
                                <el-button type="primary" class="py-3 w-100 rounded-end-pill" v-on:click="btnCreatePracticeClick('Create')">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="text-start">
                                            <div class="mb-2">
                                                快速开始
                                            </div>
                                            <small>自定义</small>
                                        </div>
                                        <div>
                                            <i class="bi bi-fast-forward-circle-fill fs-2 ms-3"></i>
                                        </div>
                                    </div>
                                </el-button>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <el-progress type="circle" :percentage="practiceWrongPercent" color="#E6A23C" :width="88" :stroke-width="8"></el-progress>
                        </div>
                        <div class="text-center">
                            <div class="mb-1 p-2 bg-light w-100 rounded-end-pill">
                                <el-button type="warning" class="py-3 w-100 rounded-end-pill" v-on:click="btnCreatePracticeClick('Wrong')">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="text-start">
                                            <div class="mb-2">
                                                错题练习
                                            </div>
                                            <small><span class="me-2">{{ practiceWrongTmTotal }}</span>道题</small>
                                        </div>
                                        <div>
                                            <i class="bi bi-x-circle-fill fs-2 ms-3"></i>
                                        </div>
                                    </div>
                                </el-button>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <el-progress type="circle" :percentage="practiceCollectPercent" color="#67C23A" :width="88" :stroke-width="8"></el-progress>
                        </div>
                        <div class="text-center">
                            <div class="mb-1 p-2 bg-light w-100 rounded-end-pill">
                                <el-button type="success" class="py-3 w-100 rounded-end-pill" v-on:click="btnCreatePracticeClick('Collect')">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="text-start">
                                            <div class="mb-2">
                                                收藏练习
                                            </div>
                                            <small><span class="me-2">{{ practiceCollectTmTotal }}</span>道题</small>
                                        </div>
                                        <div>
                                            <i class="bi bi-person-hearts fs-2 ms-3"></i>
                                        </div>
                                    </div>
                                </el-button>
                            </div>
                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <div class="p-3 pb-2 mt-4">
        <h5 class="border-start border-5 border-primary ps-2 d-flex justify-content-between align-items-center">
            <span>最新模拟测试</span>
            <el-link :underline="false" v-on:click="btnMoreMenuClick('moni')">更多<i class="el-icon-more ms-2"></i></el-link>
        </h5>
    </div>
    <div class="card rounded-0 mb-3 shadow-lg" v-if="examMoni && utils.contains(openMenus,'examPaperMoni')" v-on:click="btnViewPaperClick(examMoni.id)">
        <div class="card-body">
            <div class="mb-3">
                {{ examMoni.title }}
            </div>
            <div class="row align-items-center g-3">
                <div class="col">
                    <div>
                        <div class="fw-light">
                            <div class="mb-1">总分：{{examMoni.totalScore}}<span class="me-1"></span>及格分：{{examMoni.passScore}}</div>
                            <div class="mb-1">
                                考试次数：
                                <span class="text-success fw-bold" v-if="(examMoni.userExamTimes-examMoni.myExamTimes)>0">
                                    {{examMoni.userExamTimes-examMoni.myExamTimes}}
                                </span>
                                <span class="fs-3 text-danger fw-bold" v-else>
                                    0
                                </span>
                                /{{examMoni.userExamTimes}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="bg-light p-2 rounded-circle">
                        <el-button type="primary" circle icon="el-icon-s-order fs-1" class="p-3"></el-button>
                    </div>
                </div>
            </div>
            <div><i class="bi bi-calendar2 me-2 text-warning"></i>{{ examMoni.examStartDateTimeStr }}</div>
        </div>
    </div>
    <div class="card rounded-0 mb-3 shadow-lg" v-else>
        <div class="card-body">
            <div class="text-center p-5">
                <small><i class="bi bi-clipboard me-2"></i>暂无安排</small>
            </div>
        </div>
    </div>
    <template v-if="utils.contains(openMenus,'examPaperCer')">
        <div class="p-3 pb-2 mt-4">
            <h5 class="border-start border-5 border-primary ps-2">
                <span>最近获得证书</span>
            </h5>
        </div>
        <div class="card rounded-0 mb-3 shadow-lg" v-if="topCer && topCer.id>0" v-on:click="btnViewCer(topCer)">
            <div class="card-body">
                <div class="card card-hover">
                    <div class="row g-0">
                        <img :src="topCer.cerImg" class="w-100 rounded-0">
                    </div>
                </div>
            </div>
        </div>
        <div class="card rounded-0 mb-3 shadow-lg" v-else>
            <div class="card-body">
                <div class="text-center p-5">
                    <small><i class="bi bi-clipboard me-2"></i>暂无证书</small>
                </div>
            </div>
        </div>
    </template>
</div>
<template v-if="utils.contains(openMenus,'knowleges')">
    <div class="p-3 pb-2">
        <div class="px-3">
            <h5 class="border-start border-5 border-primary ps-2 d-flex justify-content-between align-items-center">
                <span>新上知识库</span>
                <el-link :underline="false" v-on:click="goKnowledges">更多<i class="el-icon-more ms-2"></i></el-link>
            </h5>
        </div>
    </div>
    <div class="card rounded-0 mb-3" v-if="knowList && knowList.length>0">
        <div class="card-body">
            <div class="d-flex flex-row overflow-x-auto">
                <div class="me-3 mb-3" v-for="know in knowList" style="min-width:120px;">
                    <div v-on:click="btnViewKnowClick(know)" style="cursor:pointer;">
                        <div>
                            <img :src="know.coverImgUrl" class="img-fluid card-img shadow-lg">
                        </div>
                        <div class="p-1">
                            <small><span class="me-2"><i class="bi bi-star-fill"></i> {{ know.likes }}</span><span><i class="bi bi-heart-fill"></i> {{ know.collects }}</span></small>
                            <div>
                                <a href="javascript:;" class="text-dark">{{ know.name }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card rounded-4 mb-3 shadow-lg" v-else>
        <div class="card-body">
            <div class="text-center p-5">
                <small><i class="bi bi-clipboard me-2"></i>暂无内容</small>
            </div>
        </div>
    </div>
</template>
<div class="my-8 text-center">
    <img :src="DEFAULT_LOGO_URL" height="38" class="mb-3" />
    <div class="text-center">
        <small>© {{ DOCUMENTTITLE }} <span class="text-warning">v{{ version }}</span></small>
    </div>
</div>
<div class="py-8"></div>
@section Scripts{
    <script src="/sitefiles/assets/lib/apexcharts/apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/lib/apexcharts/vue-apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/app/dashboard.js" type="text/javascript"></script> }